@section('css')
    <style>
        .form-group{
            display: flex;
        }
        .has-success .form-control {
            border-color: #5cb85c;
        }
        .has-error .form-control {
            border-color: #e73d4a;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        }
        .has-error .help-block-error{
            color:red;
        }
        .help-block-error{
            color:red;
        }
    </style>
@stop
@include('layouts.error')

<?php $props = !isset($props)?[]:$props?>

<form id="validation-form" class="form-horizontal" method="post" action="{{url('admin/property/docreate')}}">
    <input type="hidden" name="Rule[rule_id]" value="{{filter_empty($props,'props_id')}}">
    <div class="form-group">
        <label for="rule-name-input" class="col-sm-2 control-label">规格名称 <span class="required">*</span></label>
        <div class="col-sm-5">
            <input name="Rule[name]" value="{{filter_empty($props,'name')}}" type="text" class="form-control" id="rule-name-input" placeholder="">
        </div>
    </div>
<?php //dd($val_list) ?>
<?php if(isset($val_list)):?><!--遍历规格值列表开始-->
    <?php foreach($val_list as $k => $val):?>
    <div class="form-group">
        <label for="rule-value-input" class="col-sm-2 control-label">规格值<span class="required">*</span></label>
        <div class="col-sm-5">
            <input name="Val[<?= $val['props_val_id'] ?>][name]" type="text" class="form-control val_input" id="rule-value-input<?= $k?>" placeholder="" value="{{$val['name']}}">
            <input type="hidden" name="Val[<?= $val['props_val_id'] ?>][val_id]" value="<?= $val['props_val_id'] ?>">
        </div>

        <div class="col-sm-2">
            <input id="val-order-input<?= $k?>" name="Val[<?= $val['props_val_id'] ?>][sort]" type="text" class="form-control order_input" value="{{$val['sort']}}">
        </div>
        <div class="col-sm-2">
            <span class="btn btn-danger rule_val_del">删除</span>
        </div>
    </div>
    <?php endforeach;?><!--遍历规格值列表结束-->
<?php endif;?>


    <div class="form-group" id="add_rule_val_btn_container">
        <div class="col-sm-offset-2 col-sm-10">
            <span type="submit" class="btn btn-warning" id="rule_val_add">+添加规格值</span>
        </div>
    </div>

    <div class="form-group">
        <label for="rule-order" class="col-sm-2 control-label">排序<span class="required">*</span></label>
        <div class="col-sm-5">
            <input name="Rule[sort]" value="{{filter_empty($props,'sort')}}" type="text" class="form-control" id="rule-order" placeholder="">
        </div>
    </div>


    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-info">确认提交</button>
        </div>
    </div>
    {{csrf_field()}}
</form>


@section('script')
    <script src="{{asset('admin-lte/plugins/jquery-validation/js/jquery.validate.js')}}"></script>
    <script src="{{asset('js/spu/form-validate.js')}}"></script>
    <script>
        /**规格管理的js
         * Created by farewell on 2018/1/21.
         */

        var rule_manage = {

            //初始化
            init:function(){
                var val_input_count = $('.val_input').length;
                this.rule_index = val_input_count; //初始化 val_input的数量统计
                this.bindEvent();
            },

            //绑定事件
            bindEvent:function(){
                $('#rule_val_add').click($.proxy(this.clickRuleValAddbtn,this));
                $('form').on('click','.rule_val_del',$.proxy(this.clickRuleValDelBtn,this));

                //表单验证事件的添加
                this.formValidate();

                //编辑时候的validate的input值的验证添加
                this.initValInputValidate();
            },

            //点击添加规格值的按钮
            clickRuleValAddbtn : function(e){
                var target = $(e.target),
                    _this  = this;
                this.rule_index++;
                var rule_val_html = '<div class="form-group">'+
                    '<label for="rule-value-input" class="col-sm-2 control-label">规格值<span class="required">*</span></label>'+
                    '<div class="col-sm-5">'+
                    '<input id="value_input'+this.rule_index+'" name="Val[val_name][]" type="text" class="form-control val_input" id="rule-value-input" placeholder="">'+
                    '</div>'+

                    '<div class="col-sm-2">'+
                    '<input id="value_order'+this.rule_index+'"name="Val[sort][]" type="text" class="form-control">'+
                    '</div>'+
                    '<div class="col-sm-2">'+
                    '<span class="btn btn-danger rule_val_del">删除</span>'+
                    '</div>'+
                    '</div>';

                $(rule_val_html).insertBefore('#add_rule_val_btn_container');
            },

            //点击删除规格值按钮触发的事件
            clickRuleValDelBtn : function(e){
                var target = $(e.target),
                    _this  = this;
                target.closest('.form-group').remove();
            },

            //表单验证
            formValidate : function(){
                validate(
                    {
                        'Rule[name]':{'required':true},
                        'Val[val_name][]':{'required':true},
                        'Rule[sort]':{'required':true,number:true},
                        'Val[sort][]':{'required':true,number:true},
                    },
                    {
                        'Rule[name]':{'required':'规格名称不能为空'},
                        'Val[val_name][]':{'required':'值不能为空'},
                        'Rule[sort]':{'required':'规格的排序不能为空',number:'规格的排序必须是数字'},
                        'Val[sort][]':{'required':'规格值的排序不能为空',number:'规格值的排序必须是数字'},
                    }
                );
            },

            //初始化已经存在的Input的验证
            initValInputValidate : function(){
                var that = this;

                //给值的input添加验证规则
                $('.val_input').each(function(k,v){
                    $(this).rules("add", {
                        required: true,
                        messages: {
                            required: "值不能为空"
                        }
                    });
                });

                //给值排序的input添加验证规则
                $('.order_input').each(function(k,v){
                    $(this).rules("add", {
                        required: true,
                        messages: {
                            required: "值排序不能为空"
                        }
                    });
                })
            },
        };
        rule_manage.init();
    </script>
@stop
